<script setup>
import { reactive } from 'vue'
import { useRouter } from "vue-router"
const router = useRouter()
function onSelect(index) {
    router.push(index);
}

let menuList = reactive([
    {
        index: "1",
        title: "用户管理",
        icon: "User",
        menuItem: [
            {
                index: "/admin/adminUser",
                title: "用户管理"
            },
        ]
    },
    {
        index: "2",
        title: "飞机管理",
        icon: "User",
        menuItem: [
            {
                index: "/admin/adminPlane",
                title: "飞机管理"
            },
            {
                index: "/admin/adminPlaneType",
                title: "飞机类型管理"
            },
            {
                index: "/admin/adminPlaneTime",
                title: "飞机时间管理"
            },

        ]
    },
    {
        index: "3",
        title: "教练管理",
        icon: "Coach",
        menuItem: [
            {
                index: "/admin/coach",
                title: "教练管理"
            },
            {
                index: "/admin/coachTime",
                title: "教练日程"
            },
        ]
    },
    {
        index: "4",
        title: "信息管理",
        icon: "Message",
        menuItem: [
            {
                index: "/admin/message",
                title: "信息管理"
            }
        ]
    },
])
</script>

<template>
 <div>
  <el-container class="home">
        <el-aside width="200px">
            <el-container class="title">
                <img class="logo" src="~@/assets/logo.svg" alt="">
                <div>
                   俱乐部后台管理系统
                </div>
            </el-container>

            <!-- 获取当前路由地址 $route.path -->
            <el-menu active-text-color="#ffd04b" background-color="#545c64" :default-active="$route.path"
                text-color="#fff" @select="onSelect">
                <!-- 有下级菜单 -->
                <el-sub-menu v-for="menu in menuList" :index="menu.index">
                    <template #title>
                        <el-icon>
                            <!-- <Edit />  -->
                            <component :is="menu.icon"></component>
                        </el-icon>
                        <span>{{ menu.title }}</span>
                    </template>
                    <el-menu-item v-for="item in menu.menuItem" :index="item.index">{{ item.title }}</el-menu-item>
                </el-sub-menu>
            </el-menu>

        </el-aside>


        <el-container>
            <el-header></el-header>
            <el-main>
                <!-- 用来渲染子路由页面 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
 </div>
</template>

<style lang="less">

.home {
    width: 100%;
    height: 100%;

    .logo {
        width: 25px;
        height: 25px;
    }

    .title {
        display: flex;
        justify-content: space-evenly;
        padding: 20px 0;
        color: #fff;
    }

    .el-aside {
        background: #545C64;
    }

    /**
     样式嵌套 最终会编译成 .home .el-header{}
     */
    .el-header {
        background: #545C64;
    }
}
</style>